<template>
  <div class="app-container">
    <div>
        
      <el-input
        v-model="buyViewModel.OrderNo"
        size="small"
        placeholder="订单号"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="queryUser"
      />
 <el-select v-model="buyViewModel.ConfirmStatus" @change="queryUser" size="small" class="filter-item"
            placeholder="请选择订单状态">
            <el-option v-for="item in stateOptions" :key="item" :label="item | stateFilter" :value="item" />
          </el-select>
      <el-date-picker
        v-model="buyViewModel.StartTime"
        size="small"
        placeholder="开始时间"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="queryUser"
        type="datetime"
        value-format="yyyy-MM-dd HH:mm"
      />
      <el-date-picker
        v-model="buyViewModel.EndTime"
        size="small"
        placeholder="结束时间"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="queryUser"
        type="datetime"
        value-format="yyyy-MM-dd HH:mm"
      />
      <el-button type="primary" @click="queryUser" size="small" icon="el-icon-search">查询</el-button>
      <el-button type="primary" @click="refreshUser" size="small" icon="el-icon-refresh">刷新</el-button>
    </div>
    <el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}"      
      v-loading="loading"
      :data="buyList"
      style="width: 100%;margin-top:30px;"
      border
      @sort-change="sortChange"
    >
      <el-table-column label="订单号" width="200"   prop="OrderNo">
        <template slot-scope="scope">{{ scope.row.OrderNo }}</template>
      </el-table-column>
     
      <el-table-column label="购买者"  prop="Buyer">
        <template slot-scope="scope">{{ scope.row.Buyer }}</template>
      </el-table-column>
      <el-table-column label="订单状态" width="180" sortable="custom" prop="ConfirmStatus">
        <template slot-scope="scope">
          <span
            style="color:#E6A23C"
            v-if="!scope.row.IsPay"
          >{{ scope.row.ConfirmStatus|stateFilter }}</span>
          <span v-if="scope.row.IsPay">{{ scope.row.ConfirmStatus|stateFilter }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="是否付款" width="180" sortable="custom" prop="IsPay">
        <template slot-scope="scope">
          <span style="color:#F56C6C" v-if="!scope.row.IsPay">{{ scope.row.IsPay |payFilter}}</span>
          <span v-if="scope.row.IsPay">{{ scope.row.IsPay |payFilter}}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="提交时间" width="180" sortable="CreateTime" prop="CreateTime">
        <template slot-scope="scope">{{ scope.row.CreateTime | formatDateSec}}</template>
      </el-table-column>
      <!-- <el-table-column align="center" label="审核付款" width="120">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.IsPay" active-color="#13ce66" @change="changeStatus(scope)"
                inactive-color="#8d8d96">
              </el-switch>
            </template>
      </el-table-column>-->
      <el-table-column align="center" label="操作" width="220">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope)" icon="el-icon-view">审核订单</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope)" icon="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件：https://element.eleme.cn/#/zh-CN/component/pagination -->
    <div class="block" style="float:right;margin-top:15px;" v-if="buyViewModel.total>0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="buyViewModel.page"
        :page-sizes="[10, 20, 30, 40,100]"
        :page-size="buyViewModel.pageSize"
        @prev-click="lastPage"
        @next-click="nextPage"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="buyViewModel.total"
      ></el-pagination>
    </div>

    <el-dialog :visible.sync="dialogVisibleshow" :close-on-click-modal="false" :title="'订单详情'">
      <el-form
        :model="order"
        ref="order"
        label-width="80px"
        label-position="right"
        style="width: 100%;">
    <!-- <div class="detail-container"  style="width: 100%;"> -->
      <el-card shadow="never" >
      <div class="operate-container">
        <i class="el-icon-warning color-info" style="margin-left: 20px"></i>
        <span class="color-info">当前订单状态：{{order.ConfirmStatus |stateFilter}}</span>
        <div class="operate-button-container" >
          <el-button size="mini" @click="changeStatus(order.ID)"  v-if="!order.IsPay">确认订单</el-button>
          <!-- <el-button size="mini" @click="changeStatus(order.ID)"  v-if="order.IsPay">取消订单</el-button> -->
        </div>
      </div>
       <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">基本信息</span>
      </div>
       <div class="table-layout">
        <el-row>
          <!-- <el-col :span="5" class="table-cell-title">购买机构</el-col> -->
          <el-col :span="5" class="table-cell-title">购买者</el-col>
          <el-col :span="4" class="table-cell-title">订单编号</el-col>
          <el-col :span="5" class="table-cell-title">订单状态</el-col>
          <el-col :span="5" class="table-cell-title">是否支付</el-col>
          <el-col :span="5" class="table-cell-title">订单备注</el-col>
        </el-row>
        <el-row>
          <!-- <el-col :span="5" class="table-cell">{{order.OrgName}}</el-col> -->
          <el-col :span="5" class="table-cell">{{order.Buyer}}</el-col>
          <el-col :span="4" class="table-cell">{{order.OrderNo}}</el-col>

          <el-col :span="5" class="table-cell"> <span
            style="color:#E6A23C"
            v-if="!order.IsPay"
          >{{ order.ConfirmStatus|stateFilter }}</span>
          <span v-if="order.IsPay">{{ order.ConfirmStatus|stateFilter }}</span></el-col>
            <!-- <el-col :span="4" class="table-cell"> <span style="color:#F56C6C" v-if="!order.IsPay">{{ order.IsPay |payFilter}}</span> -->
          <el-col :span="5" class="table-cell"><span v-if="order.IsPay">{{ order.IsPay |payFilter}}</span></el-col> 
          <el-col :span="5" class="table-cell">{{order.Description }}</el-col>
        </el-row>

      </div>

<div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">产品信息</span>
      </div>
      <el-table

        :data="productList"
        style="width: 100%;margin-top: 20px" border>

        <el-table-column label="商品名称" align="center">
          <template slot-scope="scope">
            <p>{{scope.row.PTitle}}</p>
          </template>
        </el-table-column>
        <el-table-column label="价格" width="120" align="center">
          <template slot-scope="scope">
            <p>￥{{scope.row.Price}}</p>
          </template>
        </el-table-column>

      </el-table>

 </el-card>

 <!-- </div> -->

</el-form>


    </el-dialog>
  </div>
</template>

<script>
import {
  getBuyList,
  changeBuyStatus,
  getOrderDetailByOrderNo,
  DeleteOrderInfo
} from "@/api/buyrecord";
import { deepClone } from "@/utils";
const defaultbuy = {
  ID: "",
  OrderNo: "",
  ConfirmStatus:"",
  Description:"",
  IsPay: "",
  Buyer: "",
  OrgCode:"",
  OrgName:"",
  CreateTime: ""
};
export default {
  filters: {
    stateFilter(type) {
      const typeMap = {
        "":"全部",
        1: "待审核",
        2: "已审核"
      };
      return typeMap[type];
    },
    payFilter(type) {
      const typeMap = {
        true: "已付款",
        false: "未付款"
      };
      return typeMap[type];
    }
  },
  data() {
    return {
      stateOptions:["",1,2],
      
      buyViewModel: {
        page: 1,
        pageSize: 10,
        total: 0,
        OrderNo: "",
        PName: "",
        OrgName: "",
        StartTime: "",
        EndTime: "",
        OrderBy: "CreateTime", //排序字段
        IsAsc: "true" //是否升序
      },
      dialogVisibleshow: false,
      dialogType: "",
      order: Object.assign({}, defaultbuy),
      buyList: [],
      productList: [],
      loading: true
    };
  },

  computed: {
    // 计算属性，只要相关联的值没有改变，直接返回，不再进行计算，与方法区别，缓存
  },
  created() {
    // 实例创建完成后执行的代码
    this.getBuyList(this.buyViewModel);
     
  },
  methods: {
    async getBuyList(buyViewModel) {
      const res = await getBuyList(buyViewModel);
      if (res.data) {
        this.buyViewModel.total = res.data.TotalCount;
      }
      this.buyList = res.data.OrderItems;
      this.loading = false;
    },
    async changeBuyStatus(id) {
      var oo= await changeBuyStatus(id);
        this.order=oo.data;
      this.getBuyList(this.buyViewModel);
    },
    changeStatus(ID) {
     this.changeBuyStatus(ID);
      this.$notify({
        message: "操作成功!",
        type: "success",
        title: "成功",
        duration: 3000
      });
    },
    handleEdit(scope) {
      this.dialogType = "edit";
      this.dialogVisibleshow = true;
      this.order = deepClone(scope.row);

      this.$nextTick(() => {
 this.getorderdetailByOrderNo(scope.row);
      });
    },
    handleDelete(scope) {
      if(scope.row.ConfirmStatus!=2)
        {
        this.$confirm("确认删除?", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(async () => {
            await DeleteOrderInfo(scope.row.ID);
            this.$notify({
              title: "成功",
              type: "success",
              message: "操作成功!"
            });
            this.getBuyList(this.buyViewModel);
          })
          .catch(err => {
            console.error(err);
          });
        }
        else{
  this.$message({
              type: "warning",
              message: "当前订单已经完成,不能删除!"
            });
            return false;
          }

      },
    async getorderdetailByOrderNo(order) {
      const res = await getOrderDetailByOrderNo(order.OrderNo);
      if (res.data) {

      }
      this.productList = res.data;
      this.loading = false;
    },
    queryUser() {
      this.getBuyList(this.buyViewModel);
    },
    refreshUser() {
      this.buyViewModel.OrgCode = "";
      this.buyViewModel.OrgName = "";
      this.buyViewModel.PName = "";
      (this.buyViewModel.StartTime = ""),
        (this.buyViewModel.EndTime = ""),
        (this.buyViewModel.page = 1);
      this.getBuyList(this.buyViewModel);
    },
    sortChange(data) {
      const { prop, order } = data;
      this.buyViewModel.OrderBy = prop;
      if (prop == null || prop == "") this.buyViewModel.OrderBy = "CreateTime";
      if (order === "ascending") {
        this.buyViewModel.IsAsc = true;
      } else {
        this.buyViewModel.IsAsc = false;
      }
      this.queryUser();
    },
    lastPage(val) {
      this.buyViewModel.page = val;
    },
    nextPage(val) {
      this.buyViewModel.page = val;
    },
    handleSizeChange(val) {
      this.buyViewModel.pageSize = val;
      this.getBuyList(this.buyViewModel);
    },
    handleCurrentChange(val) {
      this.buyViewModel.page = val;
      this.getBuyList(this.buyViewModel);
    }
  }
};
</script>
<style scoped>
  .detail-container {
    width: 80%;
    padding: 20px 20px 20px 20px;
    margin: 20px auto;
  }

  .operate-container {
    background: #F2F6FC;
    height: 80px;
    margin: -20px -20px 0;
    line-height: 80px;
  }

  .operate-button-container {
    float: right;
    margin-right: 20px
  }

  .table-layout {
    margin-top: 20px;
    border-left: 1px solid #DCDFE6;
    border-top: 1px solid #DCDFE6;
  }

  .table-cell {
    height: 60px;
    line-height: 40px;
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    font-size: 14px;
    color: #606266;
    text-align: center;
    overflow: hidden;
  }

  .table-cell-title {
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    background: #F2F6FC;
    text-align: center;
    font-size: 14px;
    color: #303133;
  }
</style>
